<template>
  <el-card>
    <el-table
      v-loading="loading"
      stripe
      style="width: 100%; margin-bottom: 15px"
      border
      :data="skuData"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        label="名称"
        show-overflow-tooltip
        prop="skuName"
      ></el-table-column>
      <el-table-column
        label="描述"
        width="200px"
        show-overflow-tooltip
        prop="skuDesc"
      ></el-table-column>
      <el-table-column label="图片" width="200px" align="center">
        <template #default="{ row }">
          <el-image
            :src="row.skuDefaultImg"
            style="width: 100px; height: 100px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column fixed="right" label="操作" width="250px" align="center">
        <template #default="{ row }">
          <el-button
            @click="updateSkuState(row)"
            :type="row.isSale ? 'primary' : 'default'"
            :icon="row.isSale ? 'ArrowUp' : 'ArrowDown'"
            size="small"
          ></el-button>
          <el-button
            @click="showCurSkuInfo(row)"
            type="info"
            size="small"
            icon="Edit"
          ></el-button>
          <el-popconfirm
            :title="`确定要删除${row.skuName}吗?`"
            icon-color="#626e4e"
            icon="Delete"
            width="260"
            @confirm="deleteCurSku(row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15]"
      :small="true"
      :disabled="!total"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="getList"
      @current-change="getList"
    />
    <el-drawer v-model="drawer" indicator-position="none" title="Sku展示信息">
      <!-- <span>Hi there!</span> -->
      <el-row style="margin: 10px">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ drawerData.skuName }}</el-col>
      </el-row>
      <el-row style="margin: 10px">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ drawerData.skuDesc }}</el-col>
      </el-row>
      <el-row style="margin: 10px">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ drawerData.price }}</el-col>
      </el-row>
      <el-row style="margin: 10px">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            style="margin: 5px"
            v-for="item in drawerData.skuAttrValueList"
            :key="item.id"
            class="ml-2"
            :type="(item.id as number) % 2 ? 'success' : 'info'"
          >
            {{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            style="margin: 5px"
            v-for="item in drawerData.skuSaleAttrValueList"
            :key="item.id"
            :type="(item.id as number) % 2 ? 'success' : 'info'"
            class="ml-2"
          >
            {{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item
              v-for="item in drawerData.skuImageList"
              :key="item.id"
            >
              <el-image
                :src="item.imgUrl"
                style="width: 100%; height: 100%"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import {
  getSkuList,
  saleSkuProduct,
  unSaleSkuProduct,
  reqCurSkuInfo,
  reqDeleteCurSku,
} from '@/api/product/sku'
import type { SkuResponseData, SkuData } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'

// 删除sku
const deleteCurSku = async (id: number) => {
  const res = await reqDeleteCurSku(id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    getList()
  } else {
    ElMessage.error('系统数据不可删除')
  }
}

// 抽屉
const drawer = ref(false)
const drawerData = ref<SkuData>({})
// 点击查看sku信息
const showCurSkuInfo = async (row: SkuData) => {
  drawer.value = true
  const res: any = await reqCurSkuInfo(row.id as number)
  if (res.code === 200) {
    drawerData.value = res.data
  }
}
const skuData = ref<SkuData[]>([])
// 上架or下架
const updateSkuState = async (row: SkuData) => {
  let res
  row.isSale
    ? (res = await unSaleSkuProduct(row.id as number))
    : (res = await saleSkuProduct(row.id as number))
  if (res.code == 200) {
    ElMessage.success(row.isSale ? '下架成功' : '上架成功')
    skuData.value.length > 1 || pageNo.value - 1
    getList()
  }
}

// 分页器内容
const total = ref(1)
const pageNo = ref(1)
const pageSize = ref(5)
const loading = ref(false)

onMounted(() => {
  getList()
})
const getList = async () => {
  loading.value = true
  const res: SkuResponseData = await getSkuList(pageNo.value, pageSize.value)
  loading.value = false
  if (res.code === 200) {
    skuData.value = res.data.records
    total.value = res.data.total
  }
}
</script>

<script lang="ts">
export default {
  name: 'SkuModule',
}
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
